<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>市场情绪</title>
		<link href="css/text.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			.fixedBox{
				border: 1px solid #555555;				
				
			}
			.fixedBox::-webkit-scrollbar {
				width: 10px;     
				height: 10px;				
			}			
			
			ul{
				margin-top: 20px;
			}
			
			p{
				margin-top: -10px;
			}
			
			#f7{
				margin-left: -10px;
				color: #FFD700;		<!-- 标题颜色-->
			}
			
			#f8{
				margin-left: -10px;
				color: #FFA500;		<!-- 标题颜色-->
			}
			
			#f9{
				margin-left: -10px;
				color: #FFFF00;		<!-- 标题颜色-->
			}
			
			#f10{
				margin-left: -5px;
				color: #ADFF2F;		<!-- 标题颜色-->
			}
						
			#f11{
				color: #FFFAFA;		<!-- 详情颜色-->
			}
			
			#f12{
				margin-left: 10px;
				color: #7FFFD4;		
			}
			
		</style>		
		<script type="text/javascript" src="js/json2html.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="DatePicker/WdatePicker.js"> </script>
		<script type="text/javascript" src="js/echarts.js"></script>
	</head>
	<body>
		<div id="towrite" class="fixedBox"></div>
				
		<script>
			var dt = "";
			var tt = "";
			var gt = "";
			var k = "0";
			window.onload = function() {
			var day = new Date();
			gt = day.getTime();			
			mymonth = day.getMonth()+1;
			myday = day.getDate();
			if(mymonth >= 10){mymonth = mymonth;}else{mymonth = "0" + mymonth;}
			if(myday >= 10){myday = myday;}else{myday = "0" + myday;}
			tt = day.getFullYear() + "-" + mymonth + "-" + myday;	
			dt = tt;
			getSource();
			changeStyle();			
			}		

			function time_range(beginTime, endTime) {
				var strb = beginTime.split(":");
				if (strb.length != 2) {
					return false;
				}

				var stre = endTime.split(":");
				if (stre.length != 2) {
					return false;
				}

				var b = new Date();
				var e = new Date();
				var n = new Date();

				b.setHours(strb[0]);
				b.setMinutes(strb[1]);
				e.setHours(stre[0]);
				e.setMinutes(stre[1]);

				if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
					getSource();					
					console.log(true)　　　　　　
					return true;				
				} else {
					console.log(false)
				    return false;     
				}
			}　　　
   　　　
			$(function() {
				setInterval(function() {
				time_range("9:00","15:15")						
				},
				60000);
			})
			
			function changeStyle() {
				var div = document.getElementById("towrite");				
				div.style.left= "1px"; 				
				div.style.width= "260px";	
				//obj1.style.height= "360px";		
				div.style.fontSize="12px";	
			
			}
			
			Date.prototype.Format = function (fmt) {
				var o = {
				"M+": this.getMonth() + 1, //月份
				"d+": this.getDate(), //日
				"h+": this.getHours(), //小时
				"m+": this.getMinutes(), //分
				"s+": this.getSeconds(), //秒
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度
				"S": this.getMilliseconds() //毫秒
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			};
			
			function getLocalTime(nS) {			          
			return new Date(parseInt(nS) * 1000).Format("hh:mm:ss")}
			
			function createXmlHttp() {
				if (window.XMLHttpRequest) {
				xmlHttp1 = new XMLHttpRequest();
				xmlHttp2 = new XMLHttpRequest();
				xmlHttp3 = new XMLHttpRequest();
				xmlHttp4 = new XMLHttpRequest();
				xmlHttp5 = new XMLHttpRequest();
				} else {
				xmlHttp1 = new ActiveXObject("Microsoft.XMLHTTP");
				xmlHttp2 = new ActiveXObject("Microsoft.XMLHTTP");
				xmlHttp3 = new ActiveXObject("Microsoft.XMLHTTP");
				xmlHttp4 = new ActiveXObject("Microsoft.XMLHTTP");
				xmlHttp5 = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
								
			function cDayFunc(dp) 
			{ 
				var date = dp.cal.getNewDateStr();            
				BookingRmk(date);//调用其它函数并带上参数                
			}
			
			function BookingRmk(date)
			{         
				tt = date;
				gt = new Date(tt).getTime();
				jt = Math.round(gt/1000);
				k = 0;
				if(dt != tt)
				{			
					k = 1;
				}
				getSource();
			}
			
			function keepTwoDecimal(num) {  
               var result = parseFloat(num);  
               if (isNaN(result)) {                     
                   return false;  
               }  
               result = Math.round(num * 100) / 100;  
               return result;  
			}		
			
			function NumberTrans(num) { 
				var result = num;               
			    result = num/10000;
				result = result.toFixed(0) + '亿';			   				  
               return result;  
			};
			
			function getSource() {
				div = document.getElementById('towrite');
				var myDate = new Date();
				//var time = '<p>' + myDate.Format("hh:mm:ss") +'</p>';					
				div.innerHTML = '<font size="3" style="color:#00FFFF;">市场情绪&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><input style="width: 90px; height:15px;" type="text" id="PriceDate" name="PriceDate" class="Wdate" onFocus="WdatePicker({ onpicking: cDayFunc})" />';		
				
				<!-- var url1 = "https://apphq.longhuvip.com/w1/api/index.php?a=DiskReview&apiv=w21&c=HomeDingPan&PhoneOSNew=1"; 				 -->
				<!-- var url2 = "https://apphq.longhuvip.com/w1/api/index.php?a=ZhangFuDetail&apiv=w21&c=HomeDingPan&PhoneOSNew=1"; 				 -->
				<!-- var url3 = "https://apphq.longhuvip.com/w1/api/index.php?a=ZhangTingExpression&apiv=w21&c=HomeDingPan&PhoneOSNew=1"; 	 -->
				
				
				//盘面点评
				var url11 = "https://apphq.longhuvip.com/w1/api/index.php?a=DiskReview&apiv=w30&c=HomeDingPan"; 
				var url12 = "https://apphis.longhuvip.com/w1/api/index.php?a=DiskReview&apiv=w30&c=HisHomeDingPan&Day=" + tt;
				
				//涨跌统计				
				var url21 = "https://apphq.longhuvip.com/w1/api/index.php?a=ZhangFuDetail&apiv=w21&c=HomeDingPan"; 
				var url22 = "https://apphis.longhuvip.com/w1/api/index.php?a=HisZhangFuDetail&c=HisHomeDingPan&apiv=w27&Day=" + tt; 
				
				//涨停表现
				var url31 = "https://apphq.longhuvip.com/w1/api/index.php?a=ZhangTingExpression&apiv=w30&c=HomeDingPan"; 
				var url32 = "https://apphis.longhuvip.com/w1/api/index.php?a=ZhangTingExpression&apiv=w30&c=HisHomeDingPan&Day=" + tt;
				
				//历史数据
				var url4 = "https://apphis.longhuvip.com/w1/api/index.php?st=100&a=ChangeStatistics&apiv=w31&c=HisHomeDingPan"; 
				
				//量能
				var url5 = "https://apphq.longhuvip.com/w1/api/index.php?a=MarketCapacity&apiv=w31&Type=0&c=HomeDingPan";
				
				var url1 = url11;
				var url2 = url21;
				var url3 = url31;
				if(k == "1")
				{
					var url1 = url12;
					var url2 = url22;
					var url3 = url32;
				}				
				createXmlHttp();				
				xmlHttp1.onreadystatechange = writeSource;
				xmlHttp1.open("GET", url1, true);
				xmlHttp1.send(null);
				
				xmlHttp2.onreadystatechange = writeSource;
				xmlHttp2.open("GET", url2, true);
				xmlHttp2.send(null);
				
				xmlHttp3.onreadystatechange = writeSource;
				xmlHttp3.open("GET", url3, true);
				xmlHttp3.send(null);
				
				xmlHttp4.onreadystatechange = writeSource;
				xmlHttp4.open("GET", url4, true);
				xmlHttp4.send(null);
				
				xmlHttp5.onreadystatechange = writeSource;
				xmlHttp5.open("GET", url5, true);
				xmlHttp5.send(null);
			}
						
			function writeSource() { 						
				if (xmlHttp1.readyState == 4 && xmlHttp2.readyState == 4 && xmlHttp3.readyState == 4 && xmlHttp4.readyState == 4 && xmlHttp5.readyState == 4) {				
				
					var data1 = xmlHttp1.responseText
					var transform_aa1 = [           
					{"tag":"ul id=f7", children:function(){return(json2html.transform(this.info, transform_bb1));}}
					];
					
					var transform_bb1= 				
					{"tag":"p", children:[
					{"tag": "p","html":"综合强度：<font id=f11>${strong}</font>"},				
					{"tag": "p","html":"盘面点评：<font id=f11>${sign}</font>"},																		 						
					]};
					
					var data2 = xmlHttp2.responseText				
					var transform_aa2 = [           
					{"tag":"ul id=f8", children:function(){return(json2html.transform(this.info, transform_bb2));}}
					];
					
					var transform_bb2= 				
					{"tag":"p", children:[
					{"tag": "p","html":"涨跌统计：<font id=f11>${sign}</font>"},
					{"tag": "p","html":"实际涨停：<font id=f11>${SJZT}</font><font id=f8>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实际跌停：</font><font id=f11>${SJDT}</font>"},								
					{"tag": "p","html":"上涨家数：<font id=f11>${SZJS}</font><font id=f8>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下跌家数：</font><font id=f11>${XDJS}</font>"},												
					]};
					
					var data3 = xmlHttp3.responseText
					<!-- if(k==1){ -->
					<!-- document.write(data3); -->
					<!-- } -->
					data3 = data3.replace(/(\[).*?(?=\])/g,
					function(word){ 
						str = word.match(/\[(\S*)/)[1]; 
						return '[{"1b":' + str.split(',')[0] + 
						',"eb":' + str.split(',')[1] + 
						',"sb":' + str.split(',')[2] + 
						',"gg":' + str.split(',')[3]+
						
						',"ep":' + str.split(',')[4]+
						',"sp":' + str.split(',')[5]+
						',"gp":' + str.split(',')[6]+
						
						',"ztp":' + str.split(',')[7]+
						',"zztj":' + str.split(',')[8]+
						',"zlbj":' + str.split(',')[9]+
						',"zpbj":' + str.split(',')[10]+
						
						',"bx":' + str.split(',')[11] + 
						'}';
					});
					//document.write(data3);
					var transform_aa3 = [           
					{"tag":"ul id=f9", children:function(){return(json2html.transform(this.info, transform_bb3));}}
					];
					
					var transform_bb3= 				
					{"tag":"p", children:[
					{"tag": "p","html":"涨停股表现：<font id=f11>${bx}</font>"},
					{"tag": "p","html":"一板：<font id=f11>${1b}家</font>"},
					//{"tag": "p","html":"二板：<font id=f11>${2b}家(连板率：${2p}%)</font>"},					
					//{"tag": "p","html":"三板：<font id=f11>${3b}家(连板率：${3p}%)</font>"},
					//{"tag": "p","html":"更高：<font id=f11>${gg}家(连板率：${gp}%)</font>"},
					{"tag": "p", "html": function(){
						var pbl = this.ep;
						pbl = keepTwoDecimal(pbl);						
						return('二板：<font id=f11>' + this.eb + '家(连板率：' + pbl + "%)</font>");					
					}},
					{"tag": "p", "html": function(){
						var pbl = this.sp;
						pbl = keepTwoDecimal(pbl);						
						return('三板：<font id=f11>' + this.sb + '家(连板率：' + pbl + "%)</font>");					
					}},
					{"tag": "p", "html": function(){
						var pbl = this.gp;
						pbl = keepTwoDecimal(pbl);						
						return('更高：<font id=f11>' + this.gg + '家(连板率：' + pbl + "%)</font>");					
					}},
					//{"tag": "p","html":"涨停破板率：<font id=f11>${ztp}%</font>"},
					//{"tag": "p","html":"昨日涨停今日表现：<font id=f11>${zztj}%</font>"},	
					//{"tag": "p","html":"昨日连板今日表现：<font id=f11>${zlbj}%</font>"},
					//{"tag": "p","html":"昨日连板今日表现：<font id=f11>${zpbj}%</font>"},
					{"tag":"ul id=f10", children:[
					{"tag": "p", "html": function(){
						var pbl = this.ztp;
						pbl = keepTwoDecimal(pbl);						
						return('今日涨停破板率：<font id=f11>' + pbl + "%</font>");					
					}},
					{"tag": "p", "html": function(){
						var bl = this.zztj;
						bl = keepTwoDecimal(bl);						
						return('昨日涨停今日表现：<font id=f11>' + bl + "%</font>");					
					}},
					{"tag": "p", "html": function(){
						var bl = this.zlbj;
						bl = keepTwoDecimal(bl);						
						return('昨日连板今日表现：<font id=f11>' + bl + "%</font>");					
					}},
					{"tag": "p", "html": function(){
						var bl = this.zpbj;
						bl = keepTwoDecimal(bl);						
						return('昨日破板今日表现：<font id=f11>' + bl + "%</font>");					
					}},
					]}]};
					
					var html1 = json2html.transform(data1, transform_aa1);
					var html2 = json2html.transform(data2, transform_aa2);
					var html3 = json2html.transform(data3, transform_aa3);
					
					
					var data5 = xmlHttp5.responseText
					var zrl = data5.match(/"s_zrcs":"(\S*)/)[1].split('"')[0];
					data5 = data5.match(/\[\[(\S*)\]\]/)[1];
					//document.write(data5);
					
					var dd = data5.split('],[')
					var aa = dd[dd.length - 1].replace(/"/g,"");
					var jrl = aa.split(',')[1];
					var ycl = (jrl / zrl) * zrl;
					//alert(ycl);
					var amount = '<ul id=f9 style="margin:-10px 0px -5px -10px;">两市成交量：</ul>' +
					'<font id=f12 style="margin-left:-5px;">实际：</font><font id=f11>' + NumberTrans(jrl) + '</font>'+
					'<font id=f12>预测：</font><font id=f11>' + NumberTrans(ycl) + '</font>' +
					'<font id=f12>昨日：</font><font id=f11>' + NumberTrans(zrl) + '</font>';	
					div = document.getElementById('towrite');														
					div.innerHTML += html1 + html2 + amount + html3;	
					
					var data4 = xmlHttp4.responseText
					
                                                                                var obj = document.createElement("div");
					obj.id = "chart";
					//obj.style.border= "1px solid #555555";
					//obj.className = "fixedBox";
					//obj.style.position= "relative"; 
					obj.style.float= "left"; 
					obj.style.left= "-18px"; 
					obj.style.top= "-25px"; 
					
					obj.style.fontSize="12px";	
					div.appendChild(obj);

					
					<!-- var div4 = document.getElementById('towrite1');													 -->
					<!-- div4.innerHTML = "";	 -->
					<!-- //document.write(data4); -->
					var rq = "";
					var qd = "";
					var ss = data4.split('},{')
					for(var i = ss.length-1; i >= 0; i--){
						rq += ss[i].match(/"Day":"(\S*)/)[1].split('"')[0] + ",";
						qd += ss[i].match(/"strong":"(\S*)/)[1].split('"')[0] + ",";
					}					
					rq = "[" + rq.replace(/-/g,"") + "]";
					qd = "[" + qd + "]";
					//alert(rq)
					GetChart(rq, qd);
				}	
				document.getElementById("PriceDate").value = tt;				
			}
		</script>
		<script>
			function GetChart(rq, datas) {
				//var rq = rq.replace(',]',']');				
				var rq = JSON.parse(rq.replace(',]',']'));
				var json = JSON.parse(datas.replace(',]',']'));					
				var myChart = echarts.init(document.getElementById('chart'));
				
				var option = {
					title:{
						 left:'left',
						text: '市场情绪',
						textStyle:{ //设置主标题风格
							color:'#FFFF00',//设置主标题字体颜色
							fontStyle:'normal',//主标题文字风格
							fontSize: 12
						}
					},
					tooltip: {   //提示框
						trigger: 'axis',
						<!-- backgroundColor: "#2D8CF0", //设置背景颜色 -->
						<!-- textStyle: { -->
						  <!-- color: "#000" //设置文字颜色 -->
						<!-- }, -->
						<!-- borderColor: "#2D8CF0", //设置边框颜色 -->
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#000'
							},
							crossStyle: {								
								textStyle:{ 
									color: '#fff'									
								}
							},							 
						},						
					},					
					grid: { // 边距
					  left: '10%',
					  right: '5%',
					  bottom: '25%',
					  top: '12%',
					  //containLabel: true  //grid 区域是否包含坐标轴的刻度标签
					},
	
					xAxis: [		//x轴设置		  
						{
							type: 'category',								
							data: rq, 
							axisLine:{  //x轴坐标线设置
								lineStyle:{
									color:"#D3D3D3",  //x轴坐标线颜色
									width: 2   // 坐标轴线宽
								}
							},
							axisTick: {   //x轴刻度
								show:false, 
							},
							axisLabel:{	 //x轴标签设置						
								//rotate:45，//倾斜45°
								formatter:function(value){   //文字竖直显示
									//return value.split("2022").join("\n");
									return value.substr(0,4) + "\n" + value.substr(4,4);
								}, 
								textStyle:{  //x轴文字
									color:"#FFF"
								}
							},
							axisPointer: {
								type: 'shadow',								
							}
						}
					],

					yAxis: [  //y轴
						{
							type: 'value',
							min: function(value) {//取最小值向下取整为最小刻度									
								return Math.floor(value.min)
							},
							max: function(value) {//取最大值向上取整为最大刻度
								if(value.max < 0){
									return  0 
								}else{
									return  Math.ceil(value.max) 
								}									
							},
							interval: function (value) { // 刻度间隔
								if(value.max < 0){
									return  Math.ceil(value.min) 
								}else{
									return  Math.ceil(value.max)
								}									
							},								
							splitLine:{ //y轴网格线									
								show:true,
								lineStyle: { 									
									color: '#D3D3D3', 
									width: 1,    
									type: 'dotted', //（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								} 
							},
							axisLine: { //y轴坐标线设置
								show: true, 									
								lineStyle: { 									
									color: '#D3D3D3', //y轴颜色
									width: 2,    // 坐标轴线宽
									type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								} 
							},
							axisTick: {   //y轴刻度
								show:false, 
							},
							axisLabel: {  //y轴标签设置
								show: true,
								color: '#fff',									
								formatter: function (value){
									if(value != 0){							  
										return value
									}else{
										return 0
									}
								}
							}
						},
					],
					
					series: [						
						{
							data: json,
							type: 'line',								
							//symbol: 'circle',//拐点样式
							//symbolSize: 18,//拐点大小
							itemStyle: {
							  normal: {
								lineStyle: {
								  width: 2,//折线宽度
								  color: "#FFA500"//折线颜色
								},
								color: '#27dba0',//拐点颜色
								borderColor: '#fff',//拐点边框颜色
								borderWidth: 1//拐点边框大小
							  },
							  emphasis: {
								color: '#4CCEFE'//hover拐点颜色定义
							  }
							},
						}
					]
				}					
				myChart.setOption(option);
			}
		</script>
	</body>
</html>